<template>
  <div id="app">
    <button @click="addWeekendCurrentYear">Add all weekend of current year</button>
    <button @click="add_sat_and_sun_of_year">Add all weekend of current year22222222222222222222</button>
    <button @click="removeWeekendCurrentYear">Remove all weekend of current year</button>
    <el-button @click="subMitCalendar">提交日历</el-button>
    <select v-model="lang">
      <option value="tw">繁體中文</option>
      <option value="en">English</option>
      <option value="pt">Português</option>
      <option value="de">Deutsch</option>
      <option value="pl">Polski</option>
      <option value="ru">Русский</option>
    </select>

    <select v-model="activeClass">
      <option selected value="">(none)</option>
      <option value="red">red</option>
      <option value="blue">blue</option>
      <option value="your_customized_classname">your_customized_classname</option>
    </select>
    &emsp;
    <label for="">
      Show years selector?
      <input type="checkbox" v-model="showYearSelector">
    </label>
    &emsp;
    <label>
      Hide weekend
      <input type="checkbox" v-model="hideWeekend">
    </label>
    &emsp;
    <label>
      Hide sunday
      <input type="checkbox" v-model="hideSunday">
    </label>

    <year-calendar
      v-model="year"
      :activeDates.sync="activeDates"
      @toggleDate="toggleDate"
      :lang="lang"
      prefixClass="your_customized_wrapper_class"
      :activeClass="activeClass"
      :showYearSelector="showYearSelector"
      :hideWeekend="hideWeekend"
      :hideSunday="hideSunday"
      @monthClick="monthClicked"
    ></year-calendar>
  </div>
</template>

<script>
  import YearCalendar from '@/components/YearCalendar'
  import dayjs from 'dayjs'
  import {getEveryDayDateByBetweenDate} from "@/utils/utils";

  export default {
    components: {
      YearCalendar
    },
    data() {
      return {
        lang: 'tw', // 'en', 'tw', 'pt', 'ru'
        year: 2021,
        activeDates: [],
        activeClass: '',
        showYearSelector: true,
        hideWeekend: false,
        hideSunday: false,
        fullDays: []
      }
    },
    created() {
      this.year = dayjs().year()
      this.getFullDays()
    },
    methods: {
      addWeekendCurrentYear() {
        this.removeWeekendCurrentYear()
        let theDate = dayjs(`${this.year}-01-01`)
        let isActiveDateUsingString = this.activeDates.length && typeof this.activeDates[0] === 'string'
        while (theDate.diff(theDate.endOf('year'), 'day') !== 0) {
          if (theDate.day() === 6 || theDate.day() === 0) {
            // add weekend to activeDates
            let oDate = isActiveDateUsingString ? theDate.format('YYYY-MM-DD') : {date: theDate.format('YYYY-MM-DD')}
            this.activeDates.push(oDate)
          }
          theDate = theDate.add(1, 'day')
        }
      },
      add_sat_and_sun_of_year() {
        this.removeWeekendCurrentYear()
        let theDate = dayjs(`${this.year}-01-01`)
        let isActiveDateUsingString = this.activeDates.length && typeof this.activeDates[0] === 'string'

        console.log(theDate.day())
        while (theDate.diff(theDate.endOf('year'), 'day') !== 0) {
          let week = [0, 6]
          if (!week.includes(theDate.day())) {
            // 將週六或週日加入 activeDates 中
            // add weekend to activeDates
            let oDate = isActiveDateUsingString ? theDate.format('YYYY-MM-DD') : {date: theDate.format('YYYY-MM-DD')}
            this.activeDates.push(oDate)
          }
          theDate = theDate.add(1, 'day')
        }
      },
      getFullDays() {
        this.fullDays = getEveryDayDateByBetweenDate('2021-01-01', '2021-12-31')
      },
      monthClicked(monthYearInfo) {
        console.log(monthYearInfo)
      },
      removeWeekendCurrentYear() {
        this.activeDates = this.activeDates.filter(oDate => {
          let date = typeof oDate === 'string' ? oDate : oDate.date
          let day = dayjs(date).day()
          let isCurrentYear = dayjs(date).year() === this.year
          let isWeekend = [1, 2, 3, 4, 5, 6, 0].includes(day)
          return !(isCurrentYear && isWeekend)
        })
      },
      subMitCalendar() {
        const selectedDays = this.activeDates.map(item => {
          return {date: item.date.split('-').join('')}
        })
        this.fullDays.forEach(day => {
          selectedDays.forEach(selected => {
            if (day.date === selected.date) day.select = true
          })
        })
      },
      toggleDate(dateInfo) {
        console.log(dateInfo)
      }
    }
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  #app {
    padding: 60px;
    background-color: #eaeaea;
  }

  .your_customized_wrapper_class {
    background-color: #0aa;
    color: #fff;
  }

  .your_customized_wrapper_class.red {
    background-color: #a00;
    color: #fff;
  }

  /*.your_customized_wrapper_class.red:after {*/
  /*  background-image: url("../assets/baseline-remove_circle-24px.svg");*/
  /*  background-size: 100% 100%;*/
  /*}*/

  .your_customized_wrapper_class.blue {
    background-color: #00a;
    color: #fff;
  }

  .your_customized_wrapper_class.your_customized_classname {
    background-color: #ff0;
    color: #000;
  }

</style>
